<template>
  <a-modal
    v-model="visiable"
    title="选择直播"
    :width="860"
    class="gallery"
    @cancel="handleCancel"
    @ok="handleConfirm"
  >
    <a-form ref="form" layout="inline">
      <a-row :gutter="[16, 12]">
        <a-col :span="8">
          <a-form-item label="直播名称">
            <a-input v-model="form.name" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="主播名称">
            <a-input v-model="form.anchor_name" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="直播状态">
            <a-select v-model="form.live_status" :options="liveStatus" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="直播间状态">
            <a-select v-model="form.status" :options="liveRoomStatus" />
          </a-form-item>
        </a-col>
        <a-col :span="16" class="flex flex-right">
          <a-button type="primary">
            查询
          </a-button>
          <a-button type="default" style="margin-left: 8px">
            重置
          </a-button>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      ref="table"
      :columns="columns"
      :row-key="record => record.id"
      :data-source="tableData"
      :pagination="pagination"
      :loading="loading"
      :row-selection="rowSelection"
      size="small"
      show-pagination="auto"
      @change="handleTableChange"
    />
  </a-modal>
</template>

<script>
import { liveRoomStatus, liveStatus, columns } from '@/const/live'

export default {
  name: 'BaseSelectLive',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        name: '',
        anchor_name: '',
        status: '',
        live_status: ''
      },
      liveRoomStatus,
      liveStatus,
      columns,
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      tableData: []
    }
  },
  computed: {
    visiable: {
      get: function() {
        return this.value
      },
      set: function(newValue) {
        this.$emit('input', newValue)
      }
    },
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selected = selectedRows
        },
        getCheckboxProps: record => ({
          props: {
            // disabled: // Column configuration not to be checked
            name: String(record.goods_id)
          }
        }),
        type: 'radio'
      }
    }
  },
  watch: {
    form: function() {
      this.pagination.current = 1
      this.getList()
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      return this.$api.live
        .getList({ ...this.form, current: this.pagination.current })
        .then(({ data }) => {
          this.tableData = data.list
          this.pagination = {
            current: Number(data.current),
            pageSize: Number(data.pageSize),
            total: Number(data.total)
          }
          this.loading = false
        })
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.getList()
    },
    handleConfirm() {
      this.visiable = false
      this.$emit('confirm', this.selected)
    },
    handleCancel() {
      this.visiable = false
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-form-item {
  display: flex;
  margin-right: 0;
}
/deep/ .ant-form-item-control-wrapper {
  flex: 1;
}
.cover-image {
  height: 30px;
}
</style>
